<template>
  <div>
    <!-- 最外层容器 -->
    <el-container>
      <!-- 顶栏 -->
      <el-header class="layout-header">
        <h1 style="margin-left: 10px">后台酒店管理系统</h1>
        <div class="login-user">
          <span class="welcome" style="margin: 0 10px">欢迎 {{loginInfo.username}} 登录</span>
          <el-avatar shape="square" size="medium" :src="loginInfo.avatar"></el-avatar>
          <button style="margin-left: 10px;font-size: 18px;" size="mini" @click="logout">退出登录</button>
        </div>
      </el-header>
      <!-- 下半部分的容器 -->
      <el-container class="layout-body">
        <!-- 左侧边栏 -->

<!--        <el-aside class="layout-aside">-->

          <el-menu
              router
              :default-active="$router.currentRoute.path"
              class="el-menu-vertical-demo"
              background-color="#e8efff"
              text-color="black"
              :collapse="isCollapse"
              active-text-color="black">
            <!-- 主页 -->
            <el-menu-item index="/zwt/index">
              <i class="el-icon-s-home"></i>
              <span>主页</span>
            </el-menu-item>
            <!-- 客户管理 -->
            <el-submenu index="2">
              <template slot="title">
                <i class="el-icon-s-check"></i>
                <span>用户管理</span>
              </template>
              <el-menu-item index="/zwt/user">
                <i class="el-icon-user-solid"></i>
                <span slot="title">用户列表</span>
              </el-menu-item>
            </el-submenu>
            <!-- 员工管理 -->
            <el-submenu index="3">
              <template slot="title">
                <i class="el-icon-s-management"></i>
                <span>员工管理</span>
              </template>
              <el-menu-item index="/admin/content/category">
                <i class="el-icon-film"></i>员工查询列表</el-menu-item>
            </el-submenu>

            <!-- ---------------订单管理  dmj ------------------->
            <el-submenu index="4">
              <template slot="title">
                <i class="el-icon-s-shop"></i>
                <span>订单管理</span>
              </template>
              <el-menu-item index="/admin/order/goods">
                <i class="el-icon-location"></i>
                <span>商品订单</span>
              </el-menu-item>
              <el-menu-item index="/admin/order/house">
                <i class="el-icon-location"></i>
                <span>客房订单</span>
              </el-menu-item>
              <el-menu-item index="/admin/order/records">
                <i class="el-icon-location"></i>
                <span>住宿记录</span>
              </el-menu-item>
              <el-menu-item index="/admin/order/im">
                <i class="el-icon-location"></i>
                <span>聊天室</span>
              </el-menu-item>
            </el-submenu>


            <!-- 管理员管理 -->
            <el-submenu index="5">
              <template slot="title">
                <i class="el-icon-s-check"></i>
                <span>管理员管理</span>
              </template>
            </el-submenu>
            <!-- 库存管理 -->
            <el-submenu index="6">
              <template slot="title">
                <i class="el-icon-s-check"></i>
                <span>库存管理</span>
              </template>
              <el-menu-item index="/view/inventoryManagement">
                <i class="el-icon-location"></i>
                <span>房间管理</span>
              </el-menu-item>

              <el-submenu index="6-1">
                <template slot="title">
                  <i class="el-icon-s-check"></i>
                  <span>商品管理</span>
                </template>
                <el-menu-item index="/view/inventory/categoryManagement">
                  <i class="el-icon-location"></i>
                  <span>商品管理</span>
                </el-menu-item>
                <el-menu-item index="/view/inventory/details">
                  <i class="el-icon-location"></i>
                  <span>查看详情</span>
                </el-menu-item>
              </el-submenu>
              <el-submenu index="6-2">
                <template slot="title">
                  <i class="el-icon-s-check"></i>
                  <span>入库管理</span>
                </template>
                <el-menu-item index="/view/inventory/ware">
                  <i class="el-icon-location"></i>
                  <span>入库管理</span>
                </el-menu-item>
                <el-menu-item index="/view/inventory/addCategory">
                  <i class="el-icon-location"></i>
                  <span>新增商品</span>
                </el-menu-item>
              </el-submenu>
            </el-submenu>
             <!-- 报表管理 -->
            <el-submenu index="7">
              <template slot="title">
                <i class="el-icon-s-check"></i>
                <span>报表管理</span>
              </template>
              <el-menu-item index="/admin/xxx1">
                <i class="el-icon-location"></i>
                <span>查询营销报表</span>
              </el-menu-item>
              <el-menu-item index="/admin/xxx2">
                <i class="el-icon-location"></i>
                <span>客户报表</span>
              </el-menu-item>
              <el-menu-item index="/admin/xxx3">
                <i class="el-icon-location"></i>
                <span>财务报表</span>
              </el-menu-item>
              <el-menu-item index="/admin/xxx4">
                <i class="el-icon-location"></i>
                <span>员工信息报表</span>
              </el-menu-item>
              <el-menu-item index="/admin/xxx5">
                <i class="el-icon-location"></i>
                <span>财务详情报表</span>
              </el-menu-item>
            </el-submenu>
            <!-- 评论管理 -->
            <el-submenu index="8">
              <template slot="title">
                <i class="el-icon-chat-dot-square"></i>
                <span>推文评论管理</span>
              </template>
              <el-menu-item index="/admin/review/tweets">
                <i class="el-icon-location"></i>
                <span>推文管理</span>
              </el-menu-item>
              <el-menu-item index="/admin/review/comments">
                <i class="el-icon-location"></i>
                <span>评论管理</span>
              </el-menu-item>
            </el-submenu>
          </el-menu>
<!--        <el-button @click="toggleCollapse">{{ isCollapse ? '展开' : '收起' }}</el-button>-->
        <i class="el-icon-s-fold" v-if="!isCollapse" @click="toggleCollapse" style="font-size: 30px"> </i><!--        </el-aside>-->
        <i class="el-icon-s-unfold" v-else @click="toggleCollapse" style="font-size: 30px"></i><!--
         </el-aside>-->
        <!-- 右侧主体 -->
        <el-main class="layout-main">
          <div class="body">
            <!-- 页面的主体部分将由其它视图组件来显示 -->
            <router-view/>
          </div>
          <div class="copyright">
            <p>Copyright &copy; 成都天府中心孤注一掷小组</p>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<style>
body { margin: 0; font-family: Arial, sans-serif; }
.layout-header {   background-image: linear-gradient(to right, #5FC3E4 0%, #E55D87 100%);; color: #1a1a1a; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; }
.layout-header h1 { margin: 0; line-height: 60px; font-size: 20px; }
.layout-header .login-user { display: flex; align-items: center; font-size: 18px;font-weight: bold}
.layout-header .login-user .welcome { margin-right: 10px;font-size: 18px; font-weight: bold }
.layout-header button { background: none; border: none; color: #1a1a1a; cursor: pointer; }
.layout-body { position: absolute; top: 60px; bottom: 0; left: 0; right: 0; }
.layout-aside { background: #e8efff; padding: 10px; }
.layout-aside i { color: #1a1a1a !important; margin-right: 5px; }
.layout-aside .el-menu { border: 0; }
.layout-main { background: #fff; }
.layout-main .body { background: #f8f8f8; padding: 30px; }
.layout-main .footer { text-align: center; font-size: 12px; color: #999; margin-top: 20px; }

.el-menu-item.is-active { background: #97c8ec !important; }

/* 自定义样式 */

.login-user button { margin-left: 10px; padding: 5px 10px; border-radius: 4px; background-color: #1a1a1a; color: #fff; }
</style>



<script>


export default {
  components: {},
  data() {
    return {
      visible:false,
      isCollapse: true,
      /*
            user:localStorage.getItem("user")?JSON.parse(localStorage.getItem("user")):{},
      */
      loginInfo: {
        id: 0,
        username: '',
        avatar: '',
        token: '',
        authorities: [],
      }

    }
  },

  methods: {
    toggleCollapse() {
      this.isCollapse = !this.isCollapse;
    },
    loadLoginInfo() {
      let loginInfoString = localStorage.getItem('loginInfo');
      if (!loginInfoString) {
        this.$router.push('/login');
        return;
      }
      this.loginInfo = JSON.parse(loginInfoString);
    },
    logout() {
      this.$router.push("/login")
      localStorage.removeItem("loginInfo")
      this.$message.success("退出成功")
      this.visible = false;
    }

  },
  mounted() {
    this.loadLoginInfo();
  }
}
</script>
